<template>
  <div class="energy-min-header-container">
    <div class="energy-min-header-item" style="margin-left: 50px;">
      <span class="item-title">总费用(万元)</span>
      <span class="item-value">0</span>
    </div>
    <div class="energy-min-header-item">
      <span class="item-title">费用UC(RMB/Kwh)</span>
      <span class="item-value">0</span>
    </div>
    <div class="energy-min-header-item">
      <span class="item-title">标煤UC(Kgce/Kwh)</span>
      <span class="item-value">0</span>
    </div>
    <div class="energy-min-header-item">
      <span class="item-title">节能项目进行中(项)</span>
      <span class="item-value">0</span>
    </div>
    <div class="energy-min-header-item">
      <span class="item-title">节能项目累计完成(项)</span>
      <span class="item-value">0</span>
    </div>
    <div class="energy-min-header-item" style="border: none;">
      <span class="item-title">单价波动影响费用(万元)</span>
      <span class="item-value">0</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnergyMinHeaderCmp',
  data () {
    return {
      
    }
  }
}
</script>

<style lang="scss" scoped>
.energy-min-header-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .energy-min-header-item {
    font-size: .2rem;
    font-family: HarmonyOS_Sans_SC;
    color: #FFFFFF;
    margin-right: 50px;
    padding: 10px 0px;
    padding-right: 60px;
    display: flex;
    align-items: center;
    border-right: 1px solid;
    border-image: linear-gradient(180deg, rgba(200, 200, 200, 0), rgba(0, 219, 255, 1), rgba(151, 151, 151, 0)) 1 1;

    .item-title {
      margin-right: .2rem;
    }

    .item-value {
      font-size: .4rem;
      font-family: YouSheBiaoTiHei;
      color: #00DBFF;
      font-style: italic;
    }
  }
}
</style>
